<template name="ChooseLocationBaidu">
  <div>
    <div style="text-align:right;padding-bottom: 10px">
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
    <baidu-map
      ref="myMap"
      class="bm-view"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      :ak="ak"
      @ready="mapReady"
      @click="getClickInfo"
    >
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" />
      <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" />
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" />
    </baidu-map>
  </div>
</template>

<script>
import { baiduMapInit } from '@/api/baiduMap'
import {
  BaiduMap,
  BmScale,
  BmNavigation,
  BmOverviewMap,
  BmCityList
} from 'vue-baidu-map'

export default {
  name: 'ChooseLocationBaidu',
  components: { BaiduMap, BmScale, BmNavigation, BmOverviewMap, BmCityList },
  data() {
    return {
      map: '',
      ak: 'gCF3WxqfpdvaRxciR9m1Nm7lbgEwXrky',
      center: { lng: 0, lat: 0 },
      zoom: 3,
      locDialog: true,
      locData: {
        ids: 0,
        longitude: '',
        latitude: ''
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const _this = this
      baiduMapInit(_this.ak).then(BMap => {

      })
    })
  },
  methods: {
    // 百度地图方法
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      var i = 0; var valLen = val.length

      if (valLen === 0) {
        this.locData.ids = 0
      } else {
        for (i; i < valLen; i++) {
          if (i === 0) {
            this.locData.ids = val[i].id
          } else if (i > 0) {
            this.locData.ids += ',' + val[i].id
          }
        }
      }
    },

    // 当某一行被点击时会触发该事件   参数：row, event, column
    getRowData(editEqu, event, column) {
      this.$refs.equTable.toggleRowSelection(editEqu)
    },

    // 设置定位弹出框
    setLoc(formName) {
      if (this.locData.ids === 0) {
        this.$message({
          message: '请选中装备后再设置定位',
          type: 'warning'
        })
      } else {
        this.locDialog = true
        this.map.clearOverlays()
      }
    },
    // 百度地图
    mapReady({ BMap, map }) {
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
      this.map = map // 将map变量存储在全局
    },
    // 地图点击事件
    getClickInfo(e) {
      this.map.clearOverlays()
      var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat))
      this.map.addOverlay(myMarker)
      this.locData.longitude = e.point.lng
      this.locData.latitude = e.point.lat
    },
    // 设置定位确认
    locSubmit(formName) {
      if (this.locData.longitude === '') {
        // addOper.$message({
        //   message: '请单击地图设置定位后再提交',
        //   type: 'warning'
        // })
      } else {
        //  向后台提交locData数据
      }
      this.locDialog = false
    },
    // 设置定位取消
    locCancle(formName) {
      this.map.clearOverlays()
      this.locDialog = false
    },
    confirm() {
      this.$emit('locationChange', this.locData)
    }
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 400px;
}
</style>
